<template>
  <yt-page title="执法文书统计" scroll :leftData="leftData">
    <div class="chart" ref="chart" style="width: 100%; height: 50%"></div>
    <yt-cell
      v-for="(item, index) in items"
      :key="item.name"
      labelWidth="200px">
        <div slot="label" class="lengent-wrap">
          <div class="lengent" :style="getBgC(index)"></div>
          <span>{{item.name}}</span>
        </div>
        <span slot="default">{{item.data[0]}} 次</span>
      </yt-cell>
  </yt-page>
</template>

<script>
import echarts from 'echarts'

const COLORS = ['#189aca', '#fd9827', '#9aca41', '#cdfd9e', '#03a9f5', '#348d7c']

export default {
  data() {
    return {
      leftData: [
        {
          font: 'iconfont icon-left',
          click: () => {
            this.$router.$back()
          }
        }
      ],
      items: [],
      chartObj: {}
    }
  },
  activated () { 
    this.items = [
      {
        name: '现场检查方案文书',
        type: 'bar',
        data: [30, 50, 30, 20, 10, 24, 15, 26, 229, 44, 22, 55]
      },
      {
        name: '现场检查记录文书',
        type: 'bar',
        data: [30, 50, 30, 20, 10, 24, 15, 26, 229, 44, 22, 55]
      },
      {
        name: '责令限期整改文书',
        type: 'bar',
        data: [30, 50, 30, 20, 10, 24, 15, 26, 229, 44, 22, 55]
      },
      {
        name: '整改复查意见书',
        type: 'bar',
        data: [30, 50, 30, 20, 10, 24, 15, 26, 229, 44, 22, 55]
      }
    ]
    this.init()
  },
  methods: {
    init () {
      this.chartObj = echarts.init(this.$refs.chart)

      let self = this
      let option = {
            title: {
                subtext: '执法文书统计柱状图'
            },
            color: COLORS,
            grid: {
            left: '5%',
            right: '15%',
            // bottom: '10%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              name: '月份',
              offset: 0,
              axisLabel: {
                interval: 0,
                rotate: -50
              },
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisTick: {
                alignWithLabel: true
              },
              boundaryGap: true
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '数量',
              boundaryGap: true
            }
          ],
          series: this.items
        }

      this.chartObj.setOption(option)
    },
    getBgC (idx) {
      return `background-color:${COLORS[idx]}`
    }
  }
}
</script>

<style lang="stylus" scoped>
>>>.yt-page-container
  background-color #fff
>>>.yt-cell-label 
  padding 0
.chart 
  margin 0 auto
.lengent-title 
  color #707070
  margin-bottom 20px
.lengent-wrap
  display flex
  align-items center
  .lengent
    display inline-block
    width 20px
    height 20px
    border-radius 50%
    margin-right 10px
</style>
